<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #gotopBox {
        display: none;
        position: fixed;
        bottom: 50px;
        right: 50px;
    }

    #gotopBox img {
        display: block;
        width: 24px;
    }

    .content {
        width: 500px;
        height: 3000px;
        border: 1px solid #00AAFF;
        box-shadow: 0 0 10px #00AAFF inset;
    }
</style>

<body>
    <div class="container">
        <div class="content">

        </div>
        <a id="gotopBox">
            <div class="btn">
                <img src="../assets/images/goTop.png" alt="">
            </div>
        </a>
    </div>



    <script>
        // 封装获取页面高度的函数
        function getScroll() {
            return {
                top: window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop,
                left: window.pageXoffset || document.documentElement.scrollLeft || document.body.scrollLeft
            }
        }

        // 获取按钮
        var btn = document.getElementById("gotopBox");
        // 定义定时器
        var timer = null;
        // 定义布尔值，判断是否到达顶部
        var isTop = true;

        window.onload = function () {
            // 注册页面滚动事件
            window.onscroll = function () {
                // 获取当前页面滚动值
                var scrollTop = getScroll().top;
                // 页面滚动值大于200显示按钮，否则隐藏按钮
                btn.style.display = scrollTop >= 200 ? "block" : "none";
                // 定时器滚动时,如果手动滚动,清理定时器
                if (!isTop) {
                    clearInterval(timer);
                }
                // isTop = false,停住在当前页面
                isTop = false;
            }
        }
        // 注册按钮点击事件
        btn.onclick = function () {
            // 设置定时器
            timer = setInterval(function () {
                // 获取当前页面滚动值 假设现在为200
                var scrollTop = getScroll().top;
                // 设置速度差 speed = -200 / 6;
                var speed = Math.floor(-scrollTop / 6);
                // 页面滚动值 = 200+(-200/6);
                document.body.scrollTop = document.documentElement.scrollTop = scrollTop + speed;
                // 阻止滚动事件清理定时器
                isTop = true;
                // 页面滚动值 = 0 清理定时器
                if (scrollTop == 0) {
                    clearInterval(timer);
                }
            }, 20);
        }

    </script>
</body>

</html>